<!-- 图库首页 -->
<template>
  <div class="conent_wrap">
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :hideSelect="true"
      :sortUrl="sortUrl"
      :showUrl="showUrl"
      @selectedRowChange="getSelectedRow"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="分类名称">
            <a-input v-decorator="['caseName']" placeholder="请输入分类名称">
            </a-input>
          </a-form-item>
          <a-form-item label="分类所属">
            <a-select
              style="width: 150px"
              v-model="classification"
              placeholder="请选择分类所属"
            >
              <a-select-option value="1"> 本店分类 </a-select-option>
              <a-select-option value="2"> 其它店分类 </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission
          authority="cases:classification:add"
          v-if="classification == 1"
        >
          <a-button
            type="primary"
            icon="plus"
            @click="classifyAdd(false, { add: 'add' })"
            >新增分类</a-button
          >
        </permission>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <permission
          v-if="record.parentId == 0 && classification == 1"
          authority="cases:classification:add"
        >
          <span
            class="text-primary pointer"
            @click="classifyAdd(true, { ...record, add: 'add' })"
            >添加子集</span
          >
        </permission>
        <a-divider
          type="vertical"
          v-if="record.parentId == 0 && classification == 1"
        />
        <permission
          authority="cases:classification:modify"
          v-if="classification == 1"
        >
          <span
            class="text-primary pointer"
            @click="openNew({ ...record, add: 'update' })"
            >编辑</span
          >
        </permission>
        <a-divider type="vertical" />
        <permission authority="cases:classification:delete">
          <a-popconfirm
            :getPopupContainer="getPopupContainer()"
            title="是否确认删除？"
            @confirm="() => deleteRows([record.id])"
          >
            <a href="javascript:;" class="text-danger pointer">删除</a>
          </a-popconfirm>
        </permission>
      </template>
    </search-table>
    <case-modal
      v-model="showModal"
      @handleSubmit="handleSubmit"
      :records="currentRecord"
      :childModal="childModal"
      :title="title"
    ></case-modal>
  </div>
</template>

<script>
import SearchTable from "./components/SearchTable";
import CaseModal from "./components/CaseModal";
export default {
  name: "GalleryCase",
  directives: {},
  filters: {},
  mixins: [],
  model: {},
  props: {},
  components: {
    SearchTable,
    CaseModal,
  },
  data() {
    return {
      showModal: false,
      childModal: false,
      title: "新增分类",
      url: "/cases/classification/page",
      form: this.$form.createForm(this, { name: "table_search" }),
      currentRecord: {},
      columns: [
        {
          title: "分类名称",
          dataIndex: "caseName",
          key: "caseName",
          customRender: (text, row) => {
            return (
              <a href="javascript:;" onClick={() => {}}>
                {text}
              </a>
            );
          },
        },
        {
          title: "排序",
          dataIndex: "sort",
          key: "sort",
          align: "center",
          scopedSlots: { customRender: "changeSort" },
        },
        {
          title: "是否显示",
          dataIndex: "enableShow",
          key: "enableShow",
          align: "center",
          scopedSlots: { customRender: "changeShow" },
        },
        {
          title: "产品图片",
          dataIndex: "pictureUrl",
          key: "pictureUrl",
          align: "center",
          customRender: (text, row) => {
            // console.log("text", text);
            return <table-img src={text} />;
          },
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      classification: "1",
      sortUrl: "/cases/classification/sort",
      showUrl: "/cases/classification/update",
      deleteUrl: "/cases/classification/delete",
    };
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  // 方法集合
  methods: {
    getPopupContainer() {
      return (triggerNode) => triggerNode.parentNode.parentNode;
    },
    bianping(arr) {
      var res = [];
      for (var i = 0; i < arr.length; i++) {
        var item = arr[i];
        if (item.children && item.children.length > 0) {
          res = res.concat(this.bianping(item.children));
        }
        res.push(item);
      }
      return res;
    },
    initData(records) {
      let source = this.$refs.searchtable.dataSource;
      let array = this.bianping(source);
      array.reverse();
      if (records.parentId == 0) return records;

      if (records.parentId != 0) {
        array.forEach((item) => {
          if (records.parentId == item.id) {
            records.parentName = item.caseName;
            return;
          }
        });
      } else {
        source.forEach((item) => {
          if (records.parentId == item.id) {
            records.parentName = item.caseName;
          }
        });
      }
      return records;
    },
    getSelectedRow(rows) {
      console.log("选择的", rows);
      // if (rows.length > 0) {
      // 	this.currentSelectedProductInfo = rows[0]
      // }
      // console.log('row', this.currentSelectedProductInfo)
    },
    openNew(records) {
      this.currentRecord = this.initData(records);
      if (records.parentId != 0) {
        this.childModal = true;
      } else {
        this.childModal = false;
      }
      console.log(records);
      this.showModal = true;
    },
    deleteRows(id) {
      this.$post(this.deleteUrl, { ids: id }).then((res) => {
        if (res && res.returnCode === 1000) {
          this.$refs.searchtable.refreshTable();
        }
      });
    },
    classifyAdd(childModal, record) {
      this.childModal = childModal;
      this.currentRecord = this.initData(record);
      if (childModal) {
        this.title = "添加子级";
        this.currentRecord.caseName1 = this.currentRecord.caseName;
        this.currentRecord.caseName = "";
      } else {
        this.title = "新增分类";
      }
      this.showModal = true;
    },
    handleSubmit() {
      this.showModal = false;
      this.$refs.searchtable.refreshTable();
    },
  },
  watch: {
    classification(y) {
      if (y == 1) {
        this.url = "/cases/classification/page";
        this.sortUrl = "/cases/classification/sort";
        this.showUrl = "/cases/classification/update ";
        this.deleteUrl = "/cases/classification/delete";
        let oSearch = document.querySelector(".searchBtn");
        oSearch.click();
      } else if (y == 2) {
        this.sortUrl = "/cases/classificationpublish/sort";
        this.showUrl = "/cases/classificationpublish/update";
        this.deleteUrl = "/cases/classificationpublish/delete";
        this.url = "/cases/classificationpublish/page";
        let oSearch = document.querySelector(".searchBtn");
        oSearch.click();
      }
    },
  },
};
</script>
<style rel="stylesheet/less" lang="less" scoped></style>
